<?
	require_once('../Extras/Functions.php');
	CheckSession();
	
	$mysqli = ConectObj();
	$result = $mysqli->query("SELECT Colonia, Imperio, Tierra, Civil FROM cols WHERE Mapa=1");
	$Imperios = array(
		1=>array('x'=>238,'y'=>23,'Tierra'=>0,'Col'=>array()),
		2=>array('x'=>160,'y'=>180,'Tierra'=>0,'Col'=>array()),
		3=>array('x'=>283,'y'=>173,'Tierra'=>0,'Col'=>array()),
		4=>array('x'=>385,'y'=>275,'Tierra'=>0,'Col'=>array()),
		5=>array('x'=>263,'y'=>407,'Tierra'=>0,'Col'=>array()),
		6=>array('x'=>163,'y'=>463,'Tierra'=>0,'Col'=>array())
	);
	while($data = $result->fetch_object()){
		$Imperios[$data->Imperio]['Tierra'] += $data->Tierra;
		array_push($Imperios[$data->Imperio]['Col'],array('Colonia'=>$data->Colonia,'Tierra'=>$data->Tierra));
	}

$arrs = serialize($Imperios);
$arrs = urlencode($arrs);
?>
<!DOCTYPE HTML>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>Untitled Document</title>
	<script>
		$(document).ready(function(){
			$("#image").draggable({
				stop: function(e){
					//Si la parte izquierda de la imagen es mayor a la izquierda del contenedor...
					if( $('#image').position().left > $('#imageCanvas').position().left)
						$('#image').offset({left: $('#imageCanvas').position().left});
					//Parte superior
					if( $('#image').position().top > $('#imageCanvas').position().top)
						$('#image').offset({top: $('#imageCanvas').position().top});
					//Parte derecha
					if( $('#image').position().left+$('#image').width() < $('#imageCanvas').position().left+$('#imageCanvas').width()+10) //+Borde de ImageCanvas
						$('#image').offset({left: $('#imageCanvas').position().left - $('#image').width() + $('#imageCanvas').width()+10});
					//Parte inferior
					if( $('#image').position().top+$('#image').height() < $('#imageCanvas').position().top+$('#imageCanvas').height()+10)
						$('#image').offset({top: $('#imageCanvas').position().top - $('#image').height() + $('#imageCanvas').height()+10});
				}
			}); //Termina draggable
		}) //Termina document.ready
	</script> <!-- Script para desplazarse en el mapa -->
	<style>
		@import'Extras/uiTheme/jquery-ui-1.8.9.custom.css';
		h2{ color:#900; text-align:center; }
		map{ cursor:crosshair; }
		#imageCanvas{
			background:#FFF;
			text-align:center;
			border:#006 10px solid;
			width:550px;
			height:500px;
			overflow:hidden;
			margin:auto;
			border-radius:10px;
		}
		img{ cursor:move; }
	</style>
</head>
<body>
	<h2>HunabKu</h2>
	<div id="imageCanvas"><img src="../Extras/image.php?arr=<?=$arrs?>" border="0" usemap="#imageMap" id="image">
		<map name="imageMap">
			<?
				//Imprimo las areas de la imagen donde hay Reinos.
				$i=1;
				foreach($Imperios as $data){
					echo"<area id='sprytrigger$i' shape='circle' coords='$data[x],$data[y],25'>\n";
					$i++;
				}
			?>
		</map>
	</div>
<?
	//Imprimo los el contenido de cada spry tooltip.
	$i=1;
	foreach($Imperios as $data){
		echo"<div class='tooltipContent' id='sprytooltip$i'>
				<table>
					<tr>
						<th>Reino $i:</th>
						<th><a class='Pos'></a></th>
					</tr>
					<tr>
						<td>Colonias:</td>
						<td>".sizeof($Imperios[$i]['Col'])."</td>
					</tr>
					<tr>
						<td>Tierra:</td>
						<td>".$Imperios[$i]['Tierra']."</td>
					</tr>
				</table>
		</div>";
		$i++;
	}
?>
<script type="text/javascript">
	<?
	//Imprimo el javascript para activar cada spry.
	$i=1;
	foreach($Imperios as $data){
		echo"var sprytooltip1 = new Spry.Widget.Tooltip('sprytooltip$i', '#sprytrigger$i');";
		$i++;
	}
	?>
</script>
</body>
</html>